<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时概览 - 抖音大数据观测平台</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- 样式 -->
    <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            background: var(--bg-dark) url('../image/bj2.JPG') center/cover fixed;
        }
    </style>

    <!-- 脚本：先加载ECharts核心和地图，再加载业务脚本 -->
    <script src="js/echarts.min.js"></script>
    <script src="js/world.js"></script>
    <script src="js/china.js"></script>
    <script src="js/timeDisplay.js" defer></script>
    <script src="js/overview.js" defer></script>
    <script src="js/animation.js"></script>

</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
    <div class="logo">
        <a href="index.html" class="home-link">🏠 抖音大数据观测平台</a>
    </div>
    <ul class="nav-menu">
        <li><a href="overview.html" class="active">实时概览</a></li>
        <li><a href="hotspot.html">热点趋势</a></li>
        <li><a href="user-data.html">用户数据</a></li>
    </ul>
    <div class="time-display" id="currentTime">00:00:00</div>
    <div id="fullscreenBtn" class="btn">全屏</div>
</nav>

<!-- 主容器 -->
<main class="main-container page-transition">
    <h1 class="page-title">实时数据概览</h1>
    
    <!-- 实时指标栏 -->
    <section class="realtime-bar">
        <div class="realtime-item">
            <div class="label">当前在线</div>
            <div class="value"><span class="counter" data-target="1248367">0</span><span class="unit">人</span></div>
        </div>
        <div class="realtime-item">
            <div class="label">今日视频增量</div>
            <div class="value"><span class="counter" data-target="283900">0</span><span class="unit">条</span></div>
        </div>
        <div class="realtime-item">
            <div class="label">GMV（24h）</div>
            <div class="value">¥<span class="counter" data-target="38652">0</span><span class="unit">万</span></div>
        </div>
        <div class="realtime-item">
            <div class="label">峰值地区</div>
            <div class="value">广东</div>
        </div>
        <div class="realtime-item">
            <div class="label">平均观看时长</div>
            <div class="value"><span class="counter" data-target="42">0</span><span class="unit">分钟</span></div>
        </div>
    </section>

    <!-- 网格卡片 -->
    <section class="dashboard-grid">
        <!-- 中国地图 -->
        <div class="card map-container">
            <div class="card-header">
                <div>
                    <div class="card-title">国内访问热力</div>
                    <div class="card-subtitle">过去 24 小时</div>
                </div>
            </div>
            <div id="chinaMap" class="chart-container"></div>
        </div>

        <!-- 实时订单滚动 -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">最新成交</div>
            </div>
            <div class="data-stream" id="orderStream"></div>
        </div>

        <!-- 趋势折线 -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">实时流量趋势</div>
                <div class="update-time">最后更新：<span id="updateTime">--:--:--</span></div>
            </div>
            <div id="realtimeTrend" class="chart-container"></div>
        </div>

        <!-- 区域分布 -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">国内访问TOP10</div>
            </div>
            <div id="regionChart" class="chart-container"></div>
        </div>
    </section>
</main>
</body>
</html>